import React from 'react';

const Sidebar: React.FC<{
  selected: string;
  onSelect: (key: string) => void;
}> = ({ selected, onSelect }) => (
  <div className="sidebar">
    <div className={`sidebar-item ${selected === 'chat' ? 'active' : ''}`} onClick={() => onSelect('chat')}>
      <span role="img" aria-label="chat">💬</span>
    </div>
    <div className={`sidebar-item ${selected === 'contacts' ? 'active' : ''}`} onClick={() => onSelect('contacts')}>
      <span role="img" aria-label="contacts">👥</span>
    </div>
    <div className={`sidebar-item ${selected === 'settings' ? 'active' : ''}`} onClick={() => onSelect('settings')}>
      <span role="img" aria-label="settings">⚙️</span>
    </div>
    <div className={`sidebar-item ${selected === 'info' ? 'active' : ''}`} onClick={() => onSelect('info')}>
      <span role="img" aria-label="info">ℹ️</span>
    </div>
  </div>
);

export default Sidebar; 